<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="snap.svg-min.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;

        }

        div {
            width: 490px;
            height: 200px;
            border: 1px solid #1d1e1f;
            margin: 0px auto;
            overflow: hidden;

        }

        ul#wp-movie {

            height: 100%;
            text-align: justify;

            position: relative;

        }

        ul#wp-movie li {
            list-style: none;
            height: inherit;
            float: left;
            position: relative;

        }

    </style>
</head>
<body>

<div id="wp-row">
    <ul id="wp-movie">
        <li style="background:#5cb85c;">
            <ul>
                <li>2324</li>

            </ul>

        </li>
        <li style="background-color: #979797;">
            <ul>
                <li>fdgf</li>

            </ul>


        </li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>


</div>
<div>cxv cv</div>
<script type="text/javascript">


    $.fn.myPlugin = function (options) {
        var _this = this;
        var nowlength = 1;
        var long = 0;
        var defaults = {
            obj: this,
            speed: 800,
            inter_time:4000
        }
        options = $.extend(defaults, options);
        var b = function move() {
            long = _this.parent().width() * (-1) + long;
            options.obj.animate({left: long}, options.speed);
            console.log(long);
        }
        //在这里面,this指的是用jQuery选中的元素
        //example :$('a'),则this=$('a')
        var child = this.children("li");
        var length = child.length;
        this.css({'color': 'red', 'width': this.parent().width() * length + 10});


        child.css({'width': this.parent().width()});

        var a=  function move() {

            long = _this.parent().width() * (-1) + long;
            if (nowlength < length) {
                options.obj.animate({left: long}, options.speed);
                nowlength++;
            }
            else{

                clearInterval(t);
                setTimeout(function(){
                    _this.css({left:_this.parent().width()});
                    nowlength=1;
                    options.obj.animate({left:0}, options.speed);
                    long=0;
                   t=setInterval(a, options.inter_time);

                },100);


            }
            console.log(long);
            console.log(length);
        }

        var t = setInterval(a, options.inter_time);
    };


    var width = $("ul#wp-movie").width();
    console.log(width);

    $("ul#wp-movie").myPlugin();


</script>

</body>
</html>